var singlePinchImg = document.getElementById("singlePinchImg");
var singlePinchButton = document.getElementById("singlePinchImg-button");
Transform(singlePinchImg);
var initScale = 1;
new ZingFinger(
  singlePinchImg,
  {
    multipointStart: function () {
      initScale = singlePinchImg.scaleX;
    },
    singlePinch(evt) {
      singlePinchImg.scaleX = singlePinchImg.scaleY = initScale * evt.zoom;
    },
    pinch(evt) {
      singlePinchImg.scaleX = singlePinchImg.scaleY = initScale * evt.zoom;
    },
    tap(evt) {},
    singleTap() {},
  },
  singlePinchButton
);

var singleRotateImg = document.getElementById("singleRotateImg");
var singleRotateButton = document.getElementById("singleRotateImg-button");
Transform(singleRotateImg);
new ZingFinger(
  singleRotateImg,
  {
    singleRotate(evt) {
      singleRotateImg.rotateZ = evt.angle;
    },
    rotate(evt) {
      // console.log(singleRotateImg.rotateZ);
      singleRotateImg.rotateZ += evt.angle;
    },
    tap(evt) {},
    singleTap() {},
  },
  singleRotateButton
);

var pinchImg = document.getElementById("pinchImg");
Transform(pinchImg);
new ZingFinger(pinchImg, {
  multipointStart: function () {
    initScale = pinchImg.scaleX;
  },
  pinch: function (evt) {
    pinchImg.scaleX = pinchImg.scaleY = initScale * evt.zoom;
  },
});

var rotateImg = document.getElementById("rotateImg");
Transform(rotateImg);
new ZingFinger(rotateImg, {
  rotate: function (evt) {
    rotateImg.rotateZ += evt.angle;
  },
});

var pinchRotateImg = document.getElementById("pinchRotateImg");
Transform(pinchRotateImg);
new ZingFinger(pinchRotateImg, {
  rotate: function (evt) {
    pinchRotateImg.rotateZ += evt.angle;
  },
  multipointStart: function () {
    initScale = pinchRotateImg.scaleX;
  },
  pinch: function (evt) {
    pinchRotateImg.scaleX = pinchRotateImg.scaleY = initScale * evt.zoom;
  },
});

var pressMoveImg = document.getElementById("pressMoveImg");
Transform(pressMoveImg);
new ZingFinger(pressMoveImg, {
  pressMove: function (evt) {
    pressMoveImg.translateX += evt.deltaX;
    pressMoveImg.translateY += evt.deltaY;
    evt.preventDefault();
  },
});

function ease(x) {
  return Math.sqrt(1 - Math.pow(x - 1, 2));
}
var doubleTapImg = document.getElementById("doubleTapImg");
Transform(doubleTapImg);
new ZingFinger(doubleTapImg, {
  doubleTap: function () {
    if (doubleTapImg.scaleX === 1) {
      new To(doubleTapImg, "scaleX", 2, 500, ease);
      new To(doubleTapImg, "scaleY", 2, 500, ease);
    } else if (doubleTapImg.scaleX === 2) {
      new To(doubleTapImg, "scaleX", 1, 500, ease);
      new To(doubleTapImg, "scaleY", 1, 500, ease);
    }
  },
});

var swipeScroll = document.getElementById("swipeScroll"),
  currentIndex = 0;
Transform(swipeScroll);
function activeNav(index) {
  var items = document.querySelectorAll(".nuclear-nav a"),
    i = 0,
    len = items.length;
  for (; i < len; i++) {
    if (i === index) {
      items[i].classList.add("active");
    } else {
      items[i].classList.remove("active");
    }
  }
}
new ZingFinger(swipeScroll, {
  touchMove: function (evt) {
    if (Math.abs(evt.deltaX) >= Math.abs(evt.deltaY)) {
      evt.preventDefault();
    }
  },
  swipe: function (evt) {
    if (evt.direction === "Left") {
      if (currentIndex < 2) {
        currentIndex++;
        new To(
          swipeScroll,
          "translateX",
          -160 * currentIndex,
          500,
          ease,
          function () {
            activeNav(currentIndex);
          }
        );
      }
    } else if (evt.direction === "Right") {
      if (currentIndex > 0) {
        currentIndex--;
        new To(
          swipeScroll,
          "translateX",
          -160 * currentIndex,
          500,
          ease,
          function () {
            activeNav(currentIndex);
          }
        );
      }
    }
  },
});

var longTapBox = document.getElementById("longTapBox");
Transform(longTapBox);
var overlay = document.getElementById("overlay");
new ZingFinger(longTapBox, {
  longTap: function (evt) {
    evt.preventDefault();
    toggleDom(overlay);
  },
});

var tapBox = document.getElementById("tapBox");
Transform(tapBox);
var overlay2 = document.getElementById("overlay2");
new ZingFinger(tapBox, {
  tap: function () {
    toggleDom(overlay2);
  },
  singleTap: function () {
    console.log("singleTap");
  },
  doubleTap: function () {
    console.log("doubleTap");
  },
  pointStart: function () {
    console.log("pointStart");
  },
});

function toggleDom(dom) {
  var displayValue = window.getComputedStyle(dom, null)["display"];
  if (displayValue === "none") {
    dom.style.display = "block";
  } else {
    dom.style.display = "none";
  }
}
